<template>
    <!-- 对话框 -->
    <v-dialog persistent width="1000" v-model="show" content-class="rounded-0">
        <div class="d-flex">
            <!-- 网站信息 -->
            <v-card dark tile width="500" height="573" class="dialog_back pa-16 d-flex flex-column">
                <v-btn light absolute fab small style="top:10px;right: -20px" @click="show = false">
                    <v-icon color="grey" size="30">mdi-close-circle-outline</v-icon>
                </v-btn>
                <!-- 网站标题 -->
                <v-container class="mb-auto">
                    <h1>ZHIFOU</h1>
                    <p class="text-caption grey--text text--lighten-2">全方位的教学、考证、博客、咨询网站</p>
                </v-container>
                <!-- 推荐的博主 -->
                <v-container class="mb-auto">
                    <!-- 头像、昵称 -->
                    <div>
                        <v-avatar size="40">
                            <v-img :src="recAuthor.head_pic"></v-img>
                        </v-avatar>
                        <span class="text-caption ml-2">{{recAuthor.nickname}}</span>
                    </div>
                    <!-- 个性签名 -->
                    <p class="text-caption grey--text text--lighten-2 mt-2" v-html="recAuthor.canvases"></p>
                </v-container>
                <!-- 网站咨询标签 -->
                <v-container class="text-center">
                    <v-chip
                            label
                            small
                            link
                            color="transparent"
                            text-color="grey lighten-2"
                            v-for="link in footerLinks"
                            :key="link.id"
                            :to="link.to">
                        {{link.name}}
                    </v-chip>
                </v-container>
            </v-card>
            <!-- 窗口（登录、注册、注册成功） -->
            <v-window v-model="step">
                <!-- 登录窗口 -->
                <v-window-item :value="1">
                    <v-card tile width="500" height="573" class="pa-16 d-flex flex-column">
                        <!-- 标题 -->
                        <v-container class="d-flex align-center">
                            <h2>登录</h2>
                            <span class="text-caption ml-auto">
                                没有账号？
                                <a class="text-decoration-none" @click="step = 2">点击注册</a>
                            </span>
                        </v-container>
                        <!-- 登陆区域 -->
                        <v-container>
                            <!-- 登录表单 -->
                            <v-form ref="login_form" v-model="login.value" lazy-validation>
                                <!-- 账号文本框 -->
                                <v-text-field
                                        outlined
                                        dense
                                        :rules="login.account.rule"
                                        v-model="login.account.value"
                                        label="账号 / 邮箱 / 手机号"
                                        placeholder="账号 / 邮箱 / 手机号"/>
                                <!-- 密码文本框 -->
                                <v-text-field
                                        outlined
                                        dense
                                        :rules="login.password.rule"
                                        v-model="login.password.value"
                                        :append-icon="login.password.icon"
                                        @click:append="eyePassword"
                                        :type="login.password.type"
                                        label="密码"
                                        placeholder="请输入账号密码"/>
                                <!-- 条款与协议 -->
                                <v-checkbox
                                        dense
                                        class="mt-0 pt-0 mb-2"
                                        label="同意本公司的条款与协议"
                                        :rules="login.term.rule"
                                        v-model="login.term.value">
                                    <!-- 使用便签插槽 -->
                                    <template #label>
                                        同意本公司的<a class="text-decoration-none" href="http://www.baidu.com" @click.stop>条款与协议</a>
                                    </template>
                                </v-checkbox>
                                <!-- 登陆的按钮 -->
                                <v-btn block color="success" :disabled="!login.value" @click="toLogin">登录</v-btn>
                            </v-form>
                            <!-- 忘记密码区域 -->
                            <v-container class="text-center">
                                <a class="text-caption grey--text text-decoration-none" href="">忘记密码</a>
                            </v-container>
                        </v-container>
                        <!-- 其他登陆方式 -->
                        <v-container class="mt-auto">
                            <!--  使用文本居中分隔符 -->
                            <divider-text-center title="其他的登陆方式"></divider-text-center>
                            <!-- 图标 -->
                            <v-container class="text-center py-0">
                                <v-btn
                                        small
                                        fab
                                        v-for="(item,index) in login.otherMethods"
                                        :key="item.id"
                                        :class="{'ml-8': (index !== 0)}"
                                        :color="item.color"
                                        :to="item.to">
                                    <v-icon>{{item.icon}}</v-icon>
                                </v-btn>
                            </v-container>
                        </v-container>
                    </v-card>
                </v-window-item>
                <!-- 注册窗口 -->
                <v-window-item :value="2">
                    <v-card tile width="500" height="573" class="px-16 d-flex align-center">
                        <v-container>
                            <!-- 标题 -->
                            <v-container class="d-flex align-center">
                                <h2>注册</h2>
                                <span class="text-caption ml-auto">
                                已有账号？
                                <a class="text-decoration-none" @click="step = 1">点击登录</a>
                            </span>
                            </v-container>
                            <!-- 注册区域 -->
                            <v-container>
                                <!-- 注册表单 -->
                                <v-form ref="register_form" v-model="register.value" lazy-validation>
                                    <!-- 邮箱 -->
                                    <v-text-field
                                            outlined
                                            dense
                                            v-model="register.email.value"
                                            :rules="register.email.rule"
                                            label="邮箱号码"
                                            placeholder="请输入邮箱号码"
                                    />

                                    <v-row>
                                        <v-col>
                                            <!-- 验证码 -->
                                            <v-text-field
                                                    outlined
                                                    dense
                                                    v-model="register.evc.value"
                                                    :rules="register.evc.rule"
                                                    label="验证码"
                                                    placeholder="输入验证码"
                                            />
                                        </v-col>
                                        <v-col>
                                            <!-- 获取验证码按钮 -->
                                            <v-btn block color="info" :disabled="register.btnCountDown.disabled"
                                                   @click="buttonCountDown">
                                                {{register.btnCountDown.text}}
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                    <!-- 条款与协议 -->
                                    <v-checkbox
                                            dense
                                            class="mt-0 pt-0 mb-2"
                                            label="同意本公司的条款与协议"
                                            :rules="register.term.rule"
                                            v-model="register.term.value">
                                        <!-- 使用便签插槽 -->
                                        <template #label>
                                            同意本公司的<a class="text-decoration-none" href="http://www.baidu.com"
                                                     @click.stop>条款与协议</a>
                                        </template>
                                    </v-checkbox>
                                    <!--  注册的按钮 -->
                                    <v-btn block color="info" :disabled="!register.value" @click="toRegister">注册</v-btn>
                                </v-form>
                            </v-container>
                        </v-container>
                    </v-card>
                </v-window-item>
                <!-- 注册成功窗口 -->
                <v-window-item :value="3">
                    <v-card tile width="500" height="573" class="d-flex align-center">
                        <v-container class="text-center">
                            <!-- 图标 -->
                            <v-icon color="success" size="150">mdi-check-circle</v-icon>
                            <!-- 标题 -->
                            <h3>欢迎加入知否大家庭</h3>
                            <p class="text-caption grey--text">
                                请前往注册的邮箱，查看账号信息，
                                <a class="text-decoration-none" @click="step = 1">可点击此处前往登录</a>
                            </p>
                        </v-container>
                    </v-card>
                </v-window-item>
            </v-window>
        </div>
    </v-dialog>
</template>

<script>
    import DividerTextCenter from "@/components/DividerTextCenter";
    import eventBus from "@/utils/eventBus";

    export default {
        name: "LoginRegisterDialog",
        components: {DividerTextCenter},
        data: () => ({
            show: false, // 显示隐藏对话框
            step: 1, // 显示的窗口
            recAuthor: {}, // 推荐博主
            footerLinks: [], // 脚部链接
            login: {
                value: null, // 表单状态
                // 账号
                account: {
                    value: '', // 账号
                    rule: [v => !!v || '请填写你的账号信息！'],
                },
                // 密码
                password: {
                    value: '', // 密码值
                    icon: 'mdi-eye', // 查看密码的图标
                    type: 'password', // 输入框的类型
                    rule: [v => !!v || '请输入密码！'],
                },
                //条款
                term: {
                    value: false, // 是否勾选
                    rule: [v => !!v || '请认真阅读条款与协议！'],
                },
                otherMethods: [], // 其他登陆的方式
            },
            register: {
                value: null, // 表单状态
                // 邮箱号
                email: {
                    value: '', // 值
                    rule: [
                        v => !!v || '请填写你的邮箱！',
                        v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || '请输入正确的邮箱！',
                    ]
                },
                // 验证码
                evc: {
                    value: '', // 验证码
                    rule: [v => !!v || '请填写验证码！'], // 验证规则
                },
                //条款
                term: {
                    value: false, // 是否勾选
                    rule: [v => !!v || '请认真阅读条款与协议！'],
                },
                // 按钮倒计时
                btnCountDown: {
                    text: '获取验证码', // 文本
                    time: 60, // 时间
                    disabled: false, // 是否禁用
                    clock: null
                }
            }
        }),
        methods: {
            // 重置按钮倒计时的状态
            restBtnCountDownStatus() {
                // 清楚 Interval
                clearInterval(this.register.btnCountDown.clock)

                // 恢复按钮的最初的状态
                this.register.btnCountDown.text = '获取验证码'
                this.register.btnCountDown.time = 60
                this.register.btnCountDown.disabled = false
            },
            // 按钮倒计时
            buttonCountDown() {
                // 每1秒执行对应的代码片段
                this.register.btnCountDown.clock = setInterval(() => {
                    if (this.register.btnCountDown.time - 1 === 0) {
                        // 不需要倒计时了
                        this.restBtnCountDownStatus()
                    } else {
                        // 接着倒计时
                        this.register.btnCountDown.disabled = true // 禁用该按钮
                        this.register.btnCountDown.time-- // 时间递减1
                        this.register.btnCountDown.text = this.register.btnCountDown.time + 's秒重新获取' // 修改按钮的文本
                    }
                }, 1000)
            },
            // 去注册
            toRegister() {
                // 手动验证表单的状态
                let isSuccess = this.$refs.register_form.validate()
                if (isSuccess) {
                    // 请求服务器 -- 登录
                    alert("验证成功，请求服务器进行注册")
                }
            },
            // 获取其他的登录方式
            getOtherLoginMethods() {
                // 请求服务器 -- 获取其他的登录方式
                this.login.otherMethods = [
                    {id: 1, name: 'QQ', icon: 'mdi-qqchat', color: 'info', to: ''},
                    {id: 2, name: '微信', icon: 'mdi-wechat', color: 'success', to: ''},
                    {id: 3, name: '微博', icon: 'mdi-sina-weibo', color: 'error', to: ''}
                ]
            },
            // 去登陆
            toLogin() {
                // 手动验证表单的状态
                let isSuccess = this.$refs.login_form.validate()
                if (isSuccess) {
                    // 请求服务器 -- 登录
                    alert("验证成功，请求服务器进行登录")
                }
            },
            // 查看密码
            eyePassword() {
                // 需要查看密码
                if (this.login.password.type === 'password') {
                    this.login.password.type = 'text'
                    this.login.password.icon = 'mdi-eye-off'
                } else {
                    this.login.password.type = 'password'
                    this.login.password.icon = 'mdi-eye'
                }
            },
            // 获取脚部的链接
            getFooterLinks() {
                // 请求服务器 -- 获取脚部的链接
                this.footerLinks = [
                    {id: 1, name: '知否咨询', to: ''},
                    {id: 2, name: '关于我们', to: ''},
                    {id: 3, name: '使用条款', to: ''},
                    {id: 4, name: '帮助文档', to: ''},
                ]
            },
            // 获取推荐的博主
            getRecommendAuthor() {
                // 请求服务器 -- 获取推荐的博主
                this.recAuthor = {
                    head_pic: 'https://cdn.vuetifyjs.com/images/john.jpg', // 头像
                    nickname: '落叶归根', // 昵称
                    canvases:
                        '编程是爱好，恭喜你发现宝藏男孩一枚~希望你们关注我是因为喜欢我，嘿嘿！<br>' +
                        '私人微信：kuangshenya 备注来意<br>' +
                        '公众号：狂神说' // 个性签名
                }
            }
        },
        watch: {
            step(newData, oldData) {
                // 从登录窗口跳转到其他窗口
                if (oldData === 1) {
                    // 清楚登陆表单的内容和状态
                    this.$refs.login_form.reset()
                } else if (oldData === 2) {
                    // 清楚注册表单的内容和状态
                    this.$refs.register_form.reset()
                    // 不需要倒计时了
                    this.restBtnCountDownStatus()
                }
            },
            show: {
                immediate: true, // 初次实例化后
                handler(newData) {
                    if (newData) {
                        // 获取推荐的博主
                        this.getRecommendAuthor()
                    }
                }
            }
        },
        created() {
            // 监听一个关闭登录注册对话框的事件
            eventBus.$on('showLoginRegisterDialog', isShow => {
                this.show = isShow
            })
            // 获取脚部的链接
            this.getFooterLinks()
            // 获取其他的登录方式
            this.getOtherLoginMethods()
        }
    }
</script>

<style scoped>
    /*对话框的背景色*/
    .dialog_back {
        background-image: linear-gradient(to bottom, #3a485a, #607089);
    }
</style>